<template>
  <div>
    <v-card>
      <v-card-title>
        <v-btn color="primary" @click="addBrand">新增</v-btn>
        <v-spacer/>
        <v-text-field label="请输入首字母查询" v-model="key" append-icon="search" hide-details></v-text-field>
      </v-card-title>

      <v-divider/>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrand"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-right">{{ props.item.name }}</td>
          <td class="text-xs-right"><img :src="props.item.image"/></td>
          <td class="text-xs-right">{{ props.item.letter }}</td>
          <td class="text-xs-right">
            <v-btn color="info" @click="editBrand(props.item)">编辑</v-btn>
            <v-btn color="warning">删除</v-btn>

          </td>
        </template>
      </v-data-table>
    </v-card>


    <v-dialog
      v-model="show"
      width="500"
      persistent
    >
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{edit?"修改":"新增"}}品牌</v-toolbar-title>
          <v-spacer/>
          <v-btn @click="closeWindow" icon>
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <my-brand-form @close="closeWindow" :edit="edit" :oldBrand="oldBrand"></my-brand-form>
        </v-card-text>
      </v-card>
    </v-dialog>


  </div>
</template>

<script>
  import MyBrandForm from "./MyBrandForm"

  export default {
    components: {
      MyBrandForm
    },
    name: "my-brand",
    data() {
      return {

        pagination: {},
        totalBrand: 1,
        loading: true,
        headers: [
          {
            text: 'id',
            align: 'left',
            value: 'id'
          },
          {
            text: '名称',
            align: "center",
            sortable: false,
            value: 'name',
          },
          {
            text: 'LOGO',
            align: "right",
            sortable: false,
            value: 'image'
          },
          {
            text: '首字母',
            sortable: false,
            align: "right",
            value: 'letter'
          },
          {
            text: '操作',
            sortable: false,
            align: "right"
          }
        ],
        brands: [],
        key: "",
        show: false,
        edit: false,
        oldBrand:{}
      }
    },
    mounted() { //生命周期函数，在页面初始化后触发
      this.getDataFromServer();
    },
    methods: {
      getDataFromServer() {

        this.$http.get("/item/brand/page", {  //http://127.0.0.1:8081/brand/page
          params: {
            page: this.pagination.page,
            rows: this.pagination.rowsPerPage,
            sortBy: this.pagination.sortBy,
            desc: this.pagination.descending,
            key: this.key
          }
        }).then(({data}) => {

          //元素的总个数
          this.totalBrand = data.total;

          //当前页要展示的数据
          this.brands = data.items;

          this.loading = false;

        }).catch(resp => {
          console.log("请求失败")
        })
      },
      addBrand() {
        this.edit = false;
        this.show = true;

        this.oldBrand = {};
      },
      closeWindow() {
        this.show = false;

        //商品新增和修改完成后需要重新做查询，展示
        this.getDataFromServer();

        //只有新增和修改完成后才查询，否则不用查询
      },
      editBrand(oldBrand) {

        this.$http.get("/item/category/bid/"+oldBrand.id)
          .then(({data})=>{


            //标识量，来区别修改还是新增
            this.edit = true;

            //把查询到的分类数组赋值给oldBrand对象的categories属性
            oldBrand.categories = data;

            this.oldBrand = oldBrand;

            //打开窗口
            this.show = true;

          }).catch(resp=>{
            this.$message.error("根据品牌id查询分类出错，请稍后重试")
        })



      }
    },
    watch: {
      //监控pagination对象，当对象以及对象的内容发生改变时候，重新发起请求查询数据
      pagination: {
        deep: true,
        handler() {
          this.getDataFromServer();
        }
      },
      key() {
        this.getDataFromServer();
      }
    }
  }
</script>

<style scoped>

</style>
